<template>
  <px-dialog v-model="visible" title="审核" @close="cancel">
    <div v-loading="loading">
      <px-descriptions title="" :column="1" border class="info-content">
        <px-descriptions-item label="问题说明">
          {{ initiateData?.questionState }}
        </px-descriptions-item>
        <px-descriptions-item label="整改要求">
          {{ initiateData?.opinion }}
        </px-descriptions-item>
        <px-descriptions-item label="整改结果">
          {{ reformingData.opinion }}
        </px-descriptions-item>
        <px-descriptions-item label="附件">
          <div v-for="item in reformingData.files" :key="item?.fileKey" class="file-wrap" @click="filePreview(item)">
            <div class="file-name">{{ item?.name }}</div>
            &nbsp;;&nbsp;&nbsp;
          </div>
        </px-descriptions-item>
        <px-descriptions-item label="照片">
          <px-image
            v-for="img in reformingData.images"
            :key="img"
            style="width: 50px; margin-right: 16px"
            :preview-src-list="[img?.fileKey]"
            :src="img?.fileKey"
          />
          <!-- <div class="file-name" @click="filePreview(img, 'img')" v-for="img in reformingData.images" :key="img">{{ img?.name }}</div> -->
        </px-descriptions-item>
      </px-descriptions>
    </div>
    <px-form ref="checkFormRef" :model="checkFormParams" label-width="100px">
      <px-form-item label="审核意见" prop="advice">
        <px-input v-model="checkFormParams.advice" type="textarea" :rows="5" maxlength="300" show-word-limit clearable />
      </px-form-item>
    </px-form>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="checkPass('R')">驳回</px-button>
        <px-button type="primary" @click="checkPass('A')">通过</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, computed, toRefs } from "vue";
import { passCheckAPI, getEventLineAPI, previewAPI } from "@/api/energy/monitor";
import { PxMessage } from "px-ui";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:visible", "refresh"]);

const checkFormRef = ref(null);

const state = reactive({
  loading: false,
  checkFormParams: {
    advice: ""
  },
  initiateData: {
    eventType: "",
    files: null,
    handlerName: null,
    handlerTime: "",
    images: null,
    opinion: "",
    questionState: ""
  },
  reformingData: {
    eventType: "",
    files: [],
    handlerName: null,
    handlerTime: "",
    images: [],
    opinion: "",
    questionState: null
  }
});
const { loading, checkFormParams, initiateData, reformingData } = toRefs(state);

onMounted(() => {
  getEventLineData();
});

const filePreview = async fileData => {
  if (fileData.fileKey) {
    window.open(fileData.fileKey);
  }
  // const params = {
  //   name: fileData.name,
  //   fileKey: fileData.fileKey
  // };
  // const res = await previewAPI(params);
};
const getEventLineData = async () => {
  try {
    state.loading = true;
    const params = {
      id: props.rowData.id
    };
    const res = await getEventLineAPI(params);
    let data = res.timeline;
    // 发起整改数据
    let sData = data.filter(item => item.eventType === "S")[0];
    state.initiateData = sData;
    // 整改数据
    let mData = data.filter(item => item.eventType === "M") || [];
    state.reformingData = mData[mData.length - 1];
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

/**
 * @param type 通过A，驳回R
 */
const checkPass = async type => {
  const { advice } = state.checkFormParams;
  const params = {
    id: props.rowData.id,
    opinion: advice,
    eventType: type
  };
  await passCheckAPI(params);
  emits("update:visible", false);
  emits("refresh");
  PxMessage.success(type === "A" ? "审核通过提交成功" : "审核驳回提交成功");
};

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const cancel = () => {
  emits("update:visible", false);
};
</script>

<style lang="scss" scoped>
.title {
  padding: 8px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  background: #ebf2fe;
  border-radius: 4px;
}

.info-line {
  display: flex;
  margin-bottom: 16px;
  color: #000;

  .label {
    width: 100px;
    padding: 0 8px;
    margin-right: 8px;
    text-align: right;
  }

  .content {
    flex: 1;
  }
}

.file-wrap {
  display: inline-block;
}

.file-name {
  display: inline-block;
  color: #3b82f6;
  cursor: pointer;
}

.info-content {
  margin-bottom: 16px;

  :deep(.px-descriptions__label) {
    width: 120px;
  }
}
</style>
